<template>
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
        <div class="banner"
             ref="scroll">
            <!-- 轮播图 -->
            <div id="topBanner"
                 class="hello-1">
                <van-swipe :autoplay="3000"
                           @change="onChange">
                    <van-swipe-item v-for="(item, index) in bannerimages"
                                    :key="index">
                        <img :src="item.imgSrc" />
                    </van-swipe-item>
                </van-swipe>
            </div>

            <!-- 页中分类 -->
            <div class="hello-2">
                <div class="hello-2-1"
                     v-for="(item, index) in listimages"
                     :key="index">
                    <div>
                        <!-- <router-link v-if="item.id !=3" :to="item.link"> -->
                        <van-image class="hello-2-one"
                                   :src="item.imgSrc"
                                   @click="showToast(item.id,item.link)" />
                        <!-- </router-link> -->

                        <p class="hello-2-two">{{item.Name}}</p>
                    </div>
                </div>
            </div>

            <!-- 中间秒杀图片 -->
            <div class="hello-3"
                 v-for="(item, index) in middleimages"
                 :key="index"
                 @click="showToast('3', '')">
                <van-image width="100%"
                           height="2.433rem"
                           :src="item.imgSrc" />
            </div>

            <!-- 金猪列表 -->

            <van-list class="help-son"
                      v-model="loading"
                      :finished="finished"
                      finished-text="没有更多了"
                      @load="onLoad">
                <div class="hello-4"
                     v-for="(itemlist, index) in Piglist"
                     :key="index"
                     :class="[itemlist.id !=0? 'gray':'']"
                     @click="showDetails(itemlist.id)">
                    <div class="hello-4-top"
                         :class="[itemlist.id !=0? 'onlygray':'']">
                        <div class="hello-4-top-left">
                            <img :src="itemlist.imgSrc"
                                 alt />
                        </div>
                        <div class="hello-4-top-right">
                            <p class="pig"
                               :class="[itemlist.id !=0? 'gray':'']">{{itemlist.Pig}}</p>
                            <div class="secend">
                                <van-tag class="date">{{itemlist.Date}}</van-tag>
                                <van-tag class="recive"
                                         color="#FFBA68"
                                         :class="[itemlist.stock !=0?'':'gray']"
                                         v-if="itemlist.bonus_type==1">认养
                                </van-tag>
                                <van-tag class="recive"
                                         color="#FFBA68"
                                         :class="[itemlist.stock !=0?'':'gray']"
                                         v-else-if="itemlist.bonus_type==2">产品</van-tag>

                                <van-tag class="recive"
                                         color="#FFBA68"
                                         :class="[itemlist.stock !=0?'':'gray']"
                                         v-else>认养</van-tag>
                            </div>
                        </div>
                        <div class="hello-4-top-last"
                             :class="[itemlist.id !=0? '':'close']">
                            <img :src="itemlist.imgSrcover"
                                 alt />
                        </div>
                    </div>
                    <div class="hello-4-bottom">
                        <div class="show-one">
                            <div class="show-one-1">
                                <h4>{{itemlist.Percentage}}</h4>
                                <p class="color-2">认养分红</p>
                            </div>
                            <div class="show-one-2">
                                <h4>{{itemlist.Money}}</h4>
                                <p class="color-2 adddistance">金额(元/头)</p>
                            </div>
                            <div class="show-one-3">
                                <h4 id="show-num">{{itemlist.Month}}</h4>
                                <p class="color-2">期限(月)</p>
                            </div>
                        </div>
                        <div class="length">

                            <van-progress color="#75DEA7"
                                          :percentage="itemlist.Schedule"
                                          style="height: 0.213rem;" />
                        </div>
                    </div>
                </div>
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
            </van-list>
            <div class="lastadd"></div>

            <Tab-Bar :logeid="num"></Tab-Bar>
        </div>
    </van-pull-refresh>
</template>

<script>
import TabBar from "./TabBar.vue";

export default {
    components: {
        TabBar
    },
    // eslint-disable-next-line space-before-function-paren
    data() {
        return {
            count: 0,
            isLoading: false,
            index: 0,
            bannerimages: [
                // { id: 0, imgSrc: require("../assets/images/a16.jpg") },
                // { id: 1, imgSrc: require("../assets/images/a18.jpg") }
            ],
            listimages: [
                // {
                //   id: 0,
                //   Name: "认养",
                //   imgSrc: require("../assets/images/a1.png"),
                //   link: "/Foster"
                // },
                // {
                //   id: 1,
                //   Name: "认购",
                //   imgSrc: require("../assets/images/a2.png"),
                //   link: "/Store"
                // },
                // {
                //   id: 2,
                //   Name: "直播",
                //   imgSrc: require("../assets/images/a3.png"),
                //   link: "/Live"
                // },
                // {
                //   id: 3,
                //   Name: "商城",
                //   imgSrc: require("../assets/images/a4.png"),
                //   link: " "
                // },
                // {
                //   id: 4,
                //   Name: "火腿师",
                //   imgSrc: require("../assets/images/a5.png"),
                //   link: "/HamPeople"
                // }
            ],
            middleimages: [
                // { id: 0, imgSrc: require("../assets/images/a7.png") }
            ],
            Piglist: [
                // {
                //   id: 0,
                //   Pig: "乌金猪",
                //   Date: "第1期",
                //   Way: "认养",
                //   Percentage: "36.00%",
                //   Money: "5100.00",
                //   Month: "8",
                //   Schedule: 74,
                //   imgSrc: require("../assets/images/a11.jpg"),
                //   imgSrcover: require("../assets/images/a13.png")
                // },
                // {
                //   id: 1,
                //   Pig: "乌金猪",
                //   Date: "第2期",
                //   Way: "认养",
                //   Percentage: "36.00%",
                //   Money: "5000.00",
                //   Month: "8",
                //   Schedule: 100,
                //   imgSrc: require("../assets/images/a11.jpg"),
                //   imgSrcover: require("../assets/images/a13.png")
                // },
                // {
                //   id: 3,
                //   Pig: "乌金猪",
                //   Date: "第2期",
                //   Way: "认养",
                //   Percentage: "36.00%",
                //   Money: "5000.00",
                //   Month: "8",
                //   Schedule: "99",
                //   imgSrc: require("../assets/images/a11.jpg"),
                //   imgSrcover: require("../assets/images/a13.png")
                // }
            ],
            loading: false,
            finished: false,
            num: 0
        };
    },

    mounted() {
        // 上拉加载
        window.addEventListener("scroll", this.onScroll);
    },

    // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中
    created() {
        //数据请求第一原则:绞尽脑汁进行一次请求完毕
        //*********模拟本地接口  simulation
        //let Urlimg = "http://yyl.kmmyxb.cn/pic/";
        // eslint-disable-next-line no-unused-vars
        let params = {
            product_one_cate: "13493121"
        };
        this.MockRequestApi(
            "api/pigList",
            "",
            this.bannerimages,
            this.listimages,
            this.middleimages,
            this.Piglist,
            ""
        );

        //******下面是真实接口
        //banner图******

        //let Urlimg = "http://yyl.kmmyxb.cn/pic/";
        //this.RequestApi("api/bblist", "", this.bannerimages, Urlimg);
        // 商城list******
        //let params = {
        // product_one_cate: "13493121"
        //};
        //购买list
        //let params2 = {
        //   limit: "10",
        //   page: "1",
        //   cate_code: "13761837",
        //   title: ""
        // };
        // this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);
    },

    methods: {
        //vant 的轮播图 间隔时间和图片id
        play() {
            // eslint-disable-next-line semi
            setInterval(this.autoPlay, 2500);
        },
        onChange(index) {
            this.current = index;
        },

        //上拉加载
        onRefresh() {
            this.RefreshBtn("加载中...", 2000);

            (this.bannerimages = []),
            (this.listimages = []),
            (this.middleimages = []),
            (this.Piglist = []);
            //*********模拟本地接口  simulation
            //let Urlimg = "http://yyl.kmmyxb.cn/pic/";
            // eslint-disable-next-line no-unused-vars
            let params = {
                product_one_cate: "13493121"
            };

            setTimeout(() => {
                // this.$toast("刷新成功");
                this.isLoading = false;
                this.count++;

                this.MockRequestApi(
                    "api/pigList",
                    "",
                    this.bannerimages,
                    this.listimages,
                    this.middleimages,
                    this.Piglist,
                    ""
                );
                //this.goods();
            }, 500);
        },

        //MockRequestApi  模拟数据接口
        MockRequestApi(
            Url,
            Params,
            bannerimagesName,
            listimagesName,
            middleimagesName,
            PiglistName,
            // eslint-disable-next-line no-unused-vars
            Urlimg
        ) {
            this.$https
                .fetchGet(Url, Params)
                .then(res => {
                    //console.log(res);
                    let newData = res.data.data;
                    switch (newData.code) {
                        case 1001:
                            console.log("查询成功!");
                            console.log(newData.result);

                            for (let i = 0; i < newData.result.length; i++) {
                                console.log(newData.result[0]);
                                if (i == 0) {
                                    for (
                                        let j = 0;
                                        j < newData.result[i].bannerimages.length;
                                        j++
                                    ) {
                                        let bannerimages = newData.result[i].bannerimages;
                                        bannerimagesName.push({
                                            id: bannerimages[j].id,

                                            imgSrc: require("../assets/images/" +
                                                bannerimages[j].imgSrc +
                                                ".jpg")
                                        });
                                    }
                                } else if (i == 1) {
                                    //console.log(listimagesName);
                                    for (
                                        let j = 0;
                                        j < newData.result[i].listimages.length;
                                        j++
                                    ) {
                                        let listimages = newData.result[i].listimages;
                                        listimagesName.push({
                                            id: listimages[j].id,
                                            Name: listimages[j].Name,
                                            imgSrc: require("../assets/images/" +
                                                listimages[j].imgSrc +
                                                ".png"),
                                            link: listimages[j].link
                                        });
                                    }
                                    //console.log(listimagesName);
                                } else if (i == 2) {
                                    for (
                                        let j = 0;
                                        j < newData.result[i].middleimages.length;
                                        j++
                                    ) {
                                        let middleimages = newData.result[i].middleimages;
                                        middleimagesName.push({
                                            id: middleimages[j].id,
                                            imgSrc: require("../assets/images/" +
                                                middleimages[j].imgSrc +
                                                ".png")
                                        });
                                    }
                                } else if (i == 3) {
                                    for (let j = 0; j < newData.result[i].Piglist.length; j++) {
                                        let Piglist = newData.result[i].Piglist;
                                        PiglistName.push({
                                            id: Piglist[j].id,
                                            Pig: Piglist[j].Pig,
                                            Date: Piglist[j].Date,
                                            Way: Piglist[j].Way,
                                            Percentage: Piglist[j].Percentage,
                                            Money: Piglist[j].Money,
                                            Month: Piglist[j].Month,
                                            Schedule: Piglist[j].Schedule,
                                            imgSrc: require("../assets/images/" +
                                                Piglist[j].imgSrc +
                                                ".jpg"),
                                            imgSrcover: require("../assets/images/" +
                                                Piglist[j].imgSrcover +
                                                ".png")
                                        });
                                    }
                                }
                            }
                            console.log(this.Piglist);
                            break;
                        case 1002:
                            console.log("查询失败1!");
                            break;
                        default:
                            console.log("错误1!");
                            break;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //请求数据接口封装
        RequestApi(Url, Params, Name, Urlimg) {
            this.$https
                .fetchGet(Url, Params)
                .then(res => {
                    console.log(res.data.code);
                    let newData = res.data;

                    switch (newData.code) {
                        case 1001:
                            console.log("查询成功!");
                            switch (newData.result) {
                                case newData.result:
                                    console.log("数据存在!");

                                    if (Name == this.bannerimages) {
                                        for (let i = 0; i < newData.result.length; i++) {
                                            console.log(newData.result[i].b_id);
                                            Name.push({
                                                id: newData.result[i].b_id,
                                                //  src="http://yyl.kmmyxb.cn/pic/f8ea982e79bb5fc92685a84b3bc8fa74.jpg"
                                                imgSrc: Urlimg + newData.result[i].pic
                                            });
                                            console.log(this.bannerimages);
                                        }
                                    } else {
                                        for (let i = 0; i < newData.result.data.length; i++) {
                                            this.Piglist.push({
                                                id: 0,
                                                Pig: newData.result.data[0].title,
                                                Date: "第" + newData.result.data[0].num_per + "期",
                                                Way: newData.result.data[0].unit,
                                                Percentage:
                                                    newData.result.data[0].forecast_year_bonus + "%",
                                                Money: newData.result.data[0].price,
                                                Month: newData.result.data[0].term,
                                                imgSrc: Urlimg + newData.result.data[0].picture,
                                                more_picture:
                                                    Urlimg + newData.result.data[0].more_picture,
                                                Schedule: 96,

                                                cash_bonus_bl: newData.result.data[0].cash_bonus_bl,
                                                product_bonus_bl: newData.result.data[0].title,
                                                cash_product_bonus_bl:
                                                    newData.result.data[0].cash_product_bonus_bl,
                                                stock: newData.result.data[0].stock,
                                                unit: newData.result.data[0].unit,
                                                bonus_type: newData.result.data[0].bonus_type
                                            });
                                            this.Piglist.push({
                                                id: 0,
                                                Pig: newData.result.data[0].title,
                                                Date: "第" + newData.result.data[0].num_per + "期",
                                                Way: newData.result.data[0].unit,
                                                Percentage:
                                                    newData.result.data[0].forecast_year_bonus + "%",
                                                Money: newData.result.data[0].price,
                                                Month: newData.result.data[0].term,
                                                imgSrc: Urlimg + newData.result.data[0].picture,
                                                more_picture:
                                                    Urlimg + newData.result.data[0].more_picture,
                                                Schedule: 96,

                                                cash_bonus_bl: newData.result.data[0].cash_bonus_bl,
                                                product_bonus_bl: newData.result.data[0].title,
                                                cash_product_bonus_bl:
                                                    newData.result.data[0].cash_product_bonus_bl,
                                                stock: newData.result.data[0].stock,
                                                unit: newData.result.data[0].unit,
                                                bonus_type: newData.result.data[0].bonus_type
                                            });
                                        }
                                        console.log(this.Piglist);
                                    }

                                    break;
                                default:
                                    console.log("错误!");
                                    break;
                            }
                            break;
                        case 1002:
                            console.log("查询失败1!");
                            break;
                        default:
                            console.log("错误1!");
                            break;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

        //获取商品接口 上拉加载
        //
        // eslint-disable-next-line no-undef
        goods: _throttle(function () {
            this.bannerimages.length = 0;
            this.Piglist.length = 0;

            let Urlimg = "http://yyl.kmmyxb.cn/pic/";
            this.RequestApi("api/bblist", "", this.bannerimages, Urlimg);
            // 商城list******
            // eslint-disable-next-line no-unused-vars
            let params = {
                product_one_cate: "13493121"
            };

            //购买list
            let params2 = {
                limit: "10",
                page: "1",
                cate_code: "13761837",
                title: ""
            };
            this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);
        }, 200),

        //判定上滑刷新方法
        onScroll() {
            //可滚动容器的高度
            this.LastTime();
        },

        //弹出提示
        showToast(id, link) {
            if (id == 3) {
                this.$toast({
                    message: "此功能等待后续开放"
                });
            } else {
                this.$router.push({ path: link });
            }
        },

        //跳转本期售出详情
        showDetails(id) {
            if (id == 0) {
                this.$router.push({ path: "/PigDetails" });
            }
        },

        //刷新按钮
        RefreshBtn(title, time) {
            this.$toast.loading({
                message: title,
                duration: time
            });
        },

        //vant 加载列表方法
        onLoad() {
            // 异步更新数据
            this.RefreshBtn("加载中...", 2000);
            setTimeout(() => {
                for (let i = 0; i < 1; i++) {
                    // this.Piglist.push(this.Piglist.length + 1);
                }
                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.Piglist.length > 0) {
                    this.finished = true;
                }
            }, 500);
        },

        //函数防抖 （只执最后一次点击）多用于频繁点击
        // eslint-disable-next-line no-undef
        LastTime: _debounce(function () {
            let innerHeight = this.$refs.scroll.clientHeight;

            //屏幕尺寸高度
            let outerHeight = document.documentElement.clientHeight;
            //可滚动容器超出当前窗口显示范围的高度
            let scrollTop = document.documentElement.scrollTop;
            //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
            //console.log(innerHeight + " " + outerHeight + " " + scrollTop);
            if (innerHeight <= outerHeight + scrollTop) {
                //加载更多操作
                let params2 = {
                    limit: "10",
                    page: "1",
                    cate_code: "13761837",
                    title: ""
                };
                let Urlimg = "http://yyl.kmmyxb.cn/pic/";

                this.Piglist.length = 0;
                console.log(this.Piglist);
                this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);

                if (this.Piglist.length > 0) {
                    this.finished = true;
                }
            }
        }, 200)
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* //自定义.css的样式路径 */
/* @import "../css/HomePage.css"; */

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #f6f6f6;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
    cursor: pointer;
}
div {
    display: block;
    box-sizing: border-box;
}
.banner {
    width: 100%;
    height: 100%;
}
.hello-1 {
    width: 100%;
    height: 150px;
    padding: 0 2.6%;
    background-color: #ffffff;
    margin-top: 10px;
}
.hello-1 img {
    width: 99%;
    height: 150px;
    border-radius: 10px;
    pointer-events: none;
}
.van-swipe {
    width: 100%;
    height: 100%;
}

.hello-2 {
    width: 100%;
    height: 107.02px;
    padding-left: 5px;
    background: #fff;
    display: flex;
    flex-flow: row wrap;
}
.hell0-1 {
    width: 0%;
    height: 107.02px;
    padding-left: 5px;
}

.hello-2-1 {
    flex-basis: 20%;
    /* width: 70px; */
    height: 107px;
    padding: 16px 8px;
    display: flex;
    flex-flow: row wrap;
    padding-right: 5px;
}

.hello-2-one {
    width: 53.03px;
    height: 53.03px;
    display: flex;
    flex-flow: row wrap;
}

.hello-2-two {
    width: 53.03px;
    font-size: 15px;
    height: auto;
    text-align: center;
    color: #333;
    padding-top: 2px;
    font-size: 15px;
}

.hello-3 {
    width: 100%;
    height: 100.34px;
    padding: 0 3%;
    background: #ffffff;
}
.help-son {
    padding: 10px 10px 0 10px;
}
.hello-4 {
    height: 181.25px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 10px;
}
.hello-4-top {
    padding-top: 10px;
    padding-left: 10px;
    width: 100%;
    height: 80px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 3%;
}

.hello-4-top-left {
    width: 58px;
    height: 58px;
}
.hello-4-top-left img {
    width: 58px;
    height: 58px;
}

.hello-4-top-right {
    width: 106.69px;
    height: 60px;
    text-align: left;
    padding-left: 12px;
}

.hello-4-top-last {
    width: 58px;
    height: 58px;
    margin-left: 105px;
}
.hello-4-top-last img {
    width: 58px;
    height: 58px;
}

.pig {
    width: 100%;
    font-size: 16px;
    color: #333;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.secend {
    display: flex;
    padding-top: 10px;
}
.date {
    width: 36.69px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    background-color: rgb(233, 92, 111);
    color: #fff;
    margin-right: 10px;
}
.date-gray {
    width: 36.69px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    background-color: rgb(233, 92, 111);
    color: gray;
    margin-right: 10px;
}
.recive {
    width: 30px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    margin-right: 10px;
    color: #fff;
    background-color: #fff;
}

.hello-4-bottom {
    width: 100%;
    padding: 3%;
}
.show-one {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
h4 {
    color: #e95c6f;
    font-size: 18px;
}
.color-2 {
    color: #8a8a8a;
}
.adddistance {
    text-align: center;
    width: 100%;
}
.show-one-1 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    text-align: left;
}
.show-one-2 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    justify-content: flex-start;
}
.show-one-3 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    padding-left: 65px;
    justify-content: flex-start;
}
h4 {
    color: #e95c6f;
    font-size: 16px;
    margin-bottom: 5px;
    clear: both;
    width: 100%;
    display: block;
    font-weight: bold;
}

.length {
    width: 100%;
    height: 40px;
    padding-top: 20px;
}
.hello-5 {
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 60px;
    margin: auto;
    background: #fff;
}
.hello-5-all {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.hello-5-bottom {
    width: 20%;
    display: flex;
}

.Size {
    width: 25.984px;
    height: 25.984px;
}
.lastadd {
    width: 100%;
    height: 60px;
}

.gray {
    color: gray;
    filter: grayscale(100%);
    opacity: 0.5;
}
.onlygray {
    color: gray;
}
.close {
    display: none;
}
</style>

<style scoped>
.slide {
    width: 950px;
    height: 150px;
    margin: 0 auto;
    margin-top: 50px;
    overflow: hidden;
    position: relative;
}
.slideshow {
    width: 100%;
    height: 100%;
}
li {
    position: absolute;
}
.bar {
    position: absolute;
    width: 100%;
    top: 150px;
    margin: 0 auto;
    z-index: 10;
    text-align: center;
}
.bar span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    display: inline-block;
    margin-right: 10px;
}
.active {
    background: #bfd6b6 !important;
}
</style>
